<template>
  <div class="wan-contain" id="banner-top">
    <div class="wan-banner">
      <img src="./imgs/banner_01@2x.png" alt="" />
      <!-- <img class="img-logo" src="./imgs/pic_logo@2x.png" alt=""> -->
    </div>
    <div class="wan-content">
      <div class="container-wan">
        <div id="bklc">
          <ul class="bul">
            <li class="bli" v-for="(item, index) of bkList" :key="index">
              {{ item }}
            </li>
          </ul>
        </div>
        <div id="kssj">
          <div class="ks-content">
            <img src="./imgs/bt_kssj@2x.png" alt="" />
            <div class="ks-list">
              <ul class="ks-con">
                <li class="ks-li" v-for="(item, index) of ksList" :key="index">
                  <div class="ks-km">{{ item.major }}</div>
                  <div class="ks-cont">
                    <div class="ks-detail" style="margin-bottom: 22px">
                      <div class="span">考试时间：</div>
                      <!-- <div class="span">7月31日 09:00-11:00</div> -->
                      <div class="span">
                        {{item.dayStrs}}
                      </div>
                    </div>
                    <div class="ks-detail" style="margin-bottom: 23px">
                      <div class="span">{{item.zt==2||item.zt==5||item.zt==3||item.zt==4?"参加人数：":"报名人数："}}</div>
                      <div class="span r-t">
                        <span>{{ item.rs }}</span>
                        <div
                          class="last"
                          v-if="
                            (item.zt==0||item.zt==1)&&new Date(nowTime).getTime()>new Date(item.jsStart).getTime()&&new Date(nowTime).getTime()<new Date(item.start_time).getTime()
                          ">
                          <span>
                            <m-day @submitPaper="submitPaper" :startTime="item.start_time">
                              <span slot="starts">开始</span>
                            </m-day>
                          </span>
                        </div>
                         <div
                          class="last"
                          v-if="
                            (item.zt==2||item.zt==3)&&new Date(nowTime).getTime()>new Date(item.start_time).getTime()&&new Date(nowTime).getTime()<new Date(item.end_time).getTime()
                          ">
                          <span>
                            <m-day @submitPaper="submitPaper" :startTime="item.end_time">
                              <span slot="ends"> 距结束:</span>
                            </m-day>
                          </span>
                        </div>
                      </div>
                    </div>
                    <span
                      class="btn-span"
                      @click="baoMn(item, index)"
                      :class="[
                      item.zt == 5?'al-bao':
                        item.zt == 3
                          ? 'exam'
                          : item.zt == 1
                          ? 'al-bao'
                          : item.zt == 2
                          ? 'exam':item.zt == 'zt2'?'exam'
                          : 'want-bao', 
                      ]"
                      >{{
                        item.zt==5?"未考试":
                        item.zt==3
                          ? "继续考试"
                          : item.zt == 4
                          ? "查看结果"
                          : item.zt == 1
                          ? "已报名"
                          : item.zt == 2
                          ? "立即考试": item.zt == "zt2"?"报名考试"
                          : "我要报名"
                      }}</span
                    >
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div id="zbjd">
          <!-- 直播解答 -->
          <div class="zb-content">
            <img src="./imgs/zbjd@2x.png" alt="" />
            <div class="zb-con">
              <div class="zb-comntent">
                <div class="left">
                  <img src="./imgs/pic_mingshi@2x.png" alt="" />
                </div>
                <div class="right">
                  <div
                    class="zb-ap"
                    v-for="(item, index) of dayList"
                    :key="index"
                  >
                    <h2>{{ item.day_s }}</h2>
                    <ul class="zb-ul">
                      <li
                        class="zb-li"
                        v-for="(item1, index1) of item.list"
                        :key="index1"
                      >
                        <span>{{ item1.time }}</span>
                        <span>{{ item1.kc }}</span>
                        <span>{{ item1.name }}</span>
                        <span
                          @click="zbBtn(item1.zt)"
                          :class="[
                            item1.zt == 0 ? 'hf' : item1.zt == 1 ? 'cj' : 'wks',
                          ]"
                          >{{
                            item1.zt == 0
                              ? "查看回放"
                              : item1.zt == 1
                              ? "立即参加"
                              : "未开始"
                          }}</span
                        >
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="cjfs">
          <div class="ks-content">
            <img src="./imgs/cjfs@2x.png" alt="" />
            <div class="ks-list cj">
              <div class="ks-con cj-con">
                <div class="cj-ll">
                  <div class="con">
                    <div class="title">方式一：电脑端</div>
                    <div class="con-text">
                      <p>1.登录中课网校Web端</p>
                      <p>
                        <!-- 2.注册/登录-选择【一级建造师】项目-进入【海量题库】-【万人模考】 -->
                       2.注册/登录-点击首页【万人模考】宣传图-点击【我要报名】<br>
                      或者选择【一级建造师】项目-进入【海量题库】-【万人模考】

                      </p>
                      <p>3.点击【我要报名】</p>
                      <p>4.报名成功后，请准时参加模考</p>
                    </div>
                    <span @click="wantBao">我要报名</span>
                  </div>
                  <div class="con">
                    <div class="title">方式二：中课网校APP</div>
                    <div class="con-text">
                      <p>1.应用市场下载中课网校APP</p>
                      <p>
                        2.注册/登录-选择【一级建造师】项目-进入【题库】-【万人模考】
                      </p>
                      <p>3.点击【我要报名】</p>
                      <p>4.报名成功后，请准时参加模考</p>
                    </div>
                    <span class="down" @click="$router.push('/appDownload')"
                      >下载APP</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="jpzs">
          <div class="ks-content">
            <img src="./imgs/csjp@2x.png" alt="" />
            <div class="jp-con">
              <div class="whtie-jp">
                <ul class="jp-ul">
                  <li
                    class="jp-li"
                    v-for="(item, index) of imgList"
                    :key="index"
                  >
                    <img :src="item" alt="" />
                  </li>
                </ul>
                <div class="jp-div">
                  <p class="jp-left">{{ strP }}</p>
                  <div class="jp-right-s">
                    <img
                      style="width: 132px; height: 132px"
                      src="./imgs/pic_gzh@2x.png"
                      alt=""
                    />
                    <span>请使用微信扫码关注</span>
                  </div>
                  <div class="bottom">
                    <img src="./imgs/ic_csjp_tishi@2x.png" alt="" />
                    <span>{{ csStr }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="mkgz">
          <div class="ks-content">
            <img src="./imgs/mkgz@2x.png" alt="" />
            <div class="mk-con">
              <div class="mk-white">
                <div class="mk-cont">
                  <h2>考试说明</h2>
                  <p>
                    1.本次模考支持中课网校<span>Web端和APP</span>两种方式，通过【中课网校APP】考试的人员请先下载/更新APP；<br />
                     2.开考后可随时进入考场，完成答题即可交卷，交卷后不可再次进入答题；<br />
                    3.请于考试规定时间内进行答题，交卷时间到点后，系统将进行强制交卷；<br />
                    4.本次模考可以提前交卷；<br />
                    5.提前退出或无意退出，再次进入将重新回到退出答题页面；<br />
                    6.相同分数，作答时间最少者成绩靠前。
                  </p>
                </div>
                <div class="mk-cont">
                  <h2>奖品说明</h2>
                  <p>
                    1.每科目均选出<span>前3名</span>发放奖品，其中，建筑工程、市政工程两门课不计排名；<br />
                    2.大赛结束后1个工作日内公布名单，届时请各位考生及时登录中课网校查看；<br />
                    参赛奖品将会通过<span>【中课】公众号发送</span>，请关注【中课】公众号，回复<span>“模考”</span>领取奖品！所有考试科目结束后可查看答
                    案解析，答案解析届时公布在【中课】公众号上，请及时关注！
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="phbd">
          <div class="ks-content">
            <img src="./imgs/phb@2x.png" alt="" />
            <div class="ph-cont">
              <div class="ph-white">
                <ul class="top">
                  <li
                    @click="changeItem(item, index)"
                    :class="[index == tLindex ? 'active' : '']"
                    class="t-li"
                    v-for="(item, index) of phList"
                    :key="index"
                  >
                    {{ item.major }}
                  </li>
                </ul>
                <div class="cj-nav" v-if="dfData.length!=0">
                  <div class="nav-i">
                    <span>我的成绩</span>
                    <span>{{ dfData ? Number(dfData.df) : "暂无成绩" }}</span>
                  </div>
                  <div class="nav-i">
                    <span>我的排名</span>
                    <span>{{ dfData ? dfData.pm : "暂无排名" }}</span>
                  </div>
                  <div class="nav-i">
                    <span>我的奖品</span>
                    <span>参与奖：电子版历年真题</span>
                  </div>
                </div>
                <ul v-if="phDatas.length != 0" class="bottom">
                  <li class="h-li">
                    <div class="span">排名</div>
                    <div class="span">手机号</div>
                    <div class="span">分数</div>
                  </li>
                  <li
                    class="h-li"
                    v-for="(item, index) of phDatas"
                    :key="index"
                  >
                    <div class="span">
                      <span>
                        <img
                          v-show="index == 0"
                          src="./imgs/ic_wrmk_dym@2x.png"
                          alt=""
                        />
                        <img
                          v-show="index == 1"
                          src="./imgs/ic_wrmk_dem@2x.png"
                          alt=""
                        />
                        <img
                          v-show="index == 2"
                          src="./imgs/ic_wrmk_dsm@2x.png"
                          alt=""
                        />
                      </span>
                      <span>{{ (index + 1 + "").padStart(2, "0") }}</span>
                    </div>
                    <div class="span">{{ item.user_name }}</div>
                    <div class="span">{{ item.zdf }}</div>
                  </li>
                </ul>

                <div v-else class="nodata">
                  <div class="n-img">
                    <img src="./imgs/pic_kong@2x.png" alt="" />
                    <span>暂无排名</span>
                  </div>
                </div>
                <div class="bottoms" v-if="phDatas">
                  <img src="./imgs/ic_csjp_tishi@2x.png" alt="" />
                  <span>{{ csStr1 }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="kctj">
          <div class="tj-content">
            <img src="./imgs/kctj@2x.png" alt="" />
            <div class="tj-con">
              <div class="tj-bond">
                <img src="./imgs/pic_kctj_haibao.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 侧边 -->
    <div class="wan-mao">
      <ul class="w-ul">
        <li
          class="w-li"
          :class="[index == actIndex ? 'act' : '']"
          v-for="(item, index) of mList"
          :key="item.id"
          @click="navClick(index)"
        >
          <a>{{ item.text }}</a>
        </li>
      </ul>
      <div class="g-top">
        <a>
          <img @click="gtop" src="./imgs/ic_top_bg@2x.png" alt="" />
        </a>
      </div>
    </div>
    <div class="mol">
      <my-modal1 class="submit-modal" v-model="modal1">
        <div slot="content" class="bao-m">
          <div class="title">报名成功</div>
          <div class="ma">
            <img src="./imgs/wrmk_ewm@2x.png" alt="" />
          </div>
          <p>
            请于{{dayStr}}准时参加模考大赛，可关注【中课】公众号及时获取本次大赛进度。
          </p>
          <span style="cursor: pointer" class="close-span" @click="closeModel">我知道了</span>
        </div>
      </my-modal1>
    </div>
    <!-- 已报名提示 -->
    <div class="mol">
      <my-modal1 class="submit-modal" v-model="examProp">
        <div slot="content" class="bao-m">
          <div class="title">温馨提示</div>
          <div class="ma">
            <img src="./imgs/wrmk_wxts@2x.png" alt="" />
          </div>
          <p>
            《{{ tipObj.kmTip }}》将于<span>{{ tipObj.tipTime }}</span
            >开始考试，请准时参加。
          </p>
          <span class="close-span" style="cursor: pointer" @click="closmod"
            >我知道了</span
          >
        </div>
      </my-modal1>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import mDay from "../../../page_cmm/moment2.vue";
export default {
  components: {
    mDay
  },
  data() {
    return {
      csStr1: "市政工程、建筑工程两门模考成绩不做排行榜！",
      csStr:
        "关注“中课”公众号后，直播结束前请勿取消关注，以防错过考试和直播提醒。",
      dayList: [
        {
          day_s: "8月16日 星期一", //z
          list: [
            { time: "9:00-12:00", kc: "建设工程管理", name: "黄凯", zt: 2 },
            { time: "14:30-17:30", kc: "建设工程法规", name: "秦棋乐", zt: 2 }
          ]
        },

        {
          day_s: "8月17日 星期二",
          list: [
            { time: "9:00-12:00", kc: "建设工程经济", name: "刘敏", zt: 2 },
            { time: "14:30-17:30", kc: "建筑工程", name: "范义丰", zt: 2 },
            { time: "14:30-17:30", kc: "市政工程", name: "夏天", zt: 2 }
          ]
        }
      ],
      bkList: [
        "预约报名",
        "参加模考",
        "成绩报告",
        "成绩排名",
        "答案公布(公众号领取)",
        "领取奖品",
        "发抽奖链接"
      ],
      ksList: [],
      imgList: [
        require("./imgs/jpzs_diyi@2x.png"),
        require("./imgs/jpzs_dier@2x.png"),
        require("./imgs/jpzs_disan@2x.png"),
        require("./imgs/jpzs_canyu@2x.png")
      ],
      strP:
        "模考成绩公布于1个工作日内，请扫码关注【中课】公众号，回复“模考”领取【参赛奖品】和【答案解析】如有疑问，课拨打400-878-7501进行咨询；本活动最终解释权归中课网校所有。",
      phList: ["经济", "法规", "管理", "市政", "建筑"],
      tLindex: 0,
      phDatas: [],
      mList: [
        { text: "考试时间", id: "kssj" },
        { text: "直播解答", id: "zbjd" },
        { text: "参加方式", id: "cjfs" },
        { text: "参赛奖品", id: "jpzs" },
        { text: "模考规则", id: "mkgz" },
        { text: "排行榜", id: "phbd" },
        { text: "课程推荐", id: "kctj" }
      ],
      actIndex: null,
      modal1: false,
      // 切换排行榜是不是有数据的面板
      haveData: false,
      remaining_time: 256321456,
      timer: null,
      dfData: null, //排行榜分数成绩
      // 已报名点击提示框
      examProp: false,
      gbTime: {
        //开始计时时间时间
        jTime: "2021-08-10 19:00:00",
        fTime: "2021-08-11 19:00:00",
        gTime: "2021-08-12 19:00:00",
        sTime: "2021-08-13 19:00:00",
        zTime: "2021-08-13 19:00:00"
      },
      gbQuest: {
        //公布成绩时间
        jTime: "2021-08-13 08:00:00",
        fTime: "2021-08-14 08:00:00",
        gTime: "2021-08-15 08:00:00",
        sTime: "2021-08-16 08:00:00",
        zTime: "2021-08-16 08:00:00"
      },
      showGb: {
        //是否显示公布的成绩
        showJ: false,
        showF: false,
        showG: false,
        showS: false,
        showZ: false
      },
      // showTime: {
      //   //控制计时器的显示和隐藏
      //   showJ: false,
      //   showF: false,
      //   showG: false,
      //   showS: false,
      //   showZ: false
      // },
      // isStart: {
      //   //是否已经开始考试
      //   showJ: false,
      //   showF: false,
      //   showG: false,
      //   showS: false,
      //   showZ: false
      // },
      startExam: {
        //开始考试的时间
        jTime: "2021-08-12 19:00:00",
        fTime: "2021-08-13 19:00:00",
        gTime: "2021-08-14 19:00:00",
        sTime: "2021-08-15 19:00:00",
        zTime: "2021-08-15 19:00:00"
      },
      //考试结束时间
      examEnd: {
        jTime: "2021-08-12 21:00:00",
        fTime: "2021-08-13 22:00:00",
        gTime: "2021-08-14 22:00:00",
        sTime: "2021-08-15 23:00:00",
        zTime: "2021-08-15 23:00:00"
      },
      // 是否是考试结束之后并且公布成绩之前
      // isEnd: {
      //   showJ: false,
      //   showF: false,
      //   showG: false,
      //   showS: false,
      //   showZ: false
      // },
      // 开始时间以及科目
      tipObj: {
        tipTime: "",
        kmTip: ""
      },
      nowTmer: null, //服务器时间
      dayStr: ""
    };
  },

  computed: {},
  methods: {
    // 获取服务器时间
    fwTime() {
      console.log("33333333333333333333333332222");
      let obj = {
        token: this.$store.state.$user.token || ""
      };
      this.$api.paper.getTimeStamp(obj).then(res => {
        let dayD = new Date(res.data.service_time * 1000);
        let y = dayD.getFullYear();
        let m = (dayD.getMonth() + 1 + "").padStart(2, "0");
        let d = (dayD.getDate() + "").padStart(2, "0");
        let h = (dayD.getHours() + "").padStart(2, "0");
        let mm = (dayD.getMinutes() + "").padStart(2, "0");
        let s = (dayD.getSeconds() + "").padStart(2, "0");
        let str = `${y}-${m}-${d} ${h}:${mm}:${s}`;
        this.nowTime = str;
        // this.jsShow(str);
        this.cjShow(str);
        // this.examIsEnd(str);
        // this.isStartExam(str);
        this.beforBegin(str); //直播时间控制
        this.beforBegin2(str); //直播时间控制
        this.wrList();
      });
    },
    // 已报名的弹框提示文字赋值
    examTip(data) {
      this.tipObj.kmTip = data.major;
      if (data.major == "经济") {
        this.tipObj.tipTime = this.startExam.jTime;
      } else if (data.major == "法规") {
        this.tipObj.tipTime = this.startExam.fTime;
      } else if (data.major == "管理") {
        this.tipObj.tipTime = this.startExam.gTime;
      } else if (data.major == "市政") {
        this.tipObj.tipTime = this.startExam.sTime;
      } else if (data.major == "建筑") {
        this.tipObj.tipTime = this.startExam.zTime;
      }
      this.examProp = true;
    },
    // 关闭对话框
    closmod() {
      this.examProp = false;
    },
    submitPaper() {
      this.fwTime();
      this.$router.go(0);
    },
    // 试卷列表
    wrList() {
      let obj = {
        token: this.$store.state.$user.token || "",
        lb_id: "4aud"
      };
      this.$api.paper.wrList(obj).then(res => {
        let resD = res.data.data;
        let wrLists = resD.map(item => {
          let startT = new Date(item.start_time);
          let endT = new Date(item.end_time);
          let sy = startT.getFullYear();
          let mounth = startT.getMonth() + 1;
          let day = startT.getDate();
          let sd = (startT.getDate() - 2 + "").padStart(2, 0);
          let sh = (startT.getHours() + "").padStart(2, 0);
          let sf = (startT.getMinutes() + "").padStart(2, 0);
          let ss = (startT.getSeconds() + "").padStart(2, 0);
          let eh = (endT.getHours() + "").padStart(2, 0);
          let ef = (endT.getMinutes() + "").padStart(2, 0);
          let dstr = `${mounth}月${day}日 ${sh}:${sf}-${eh}:${ef}`;
          let jss = `${sy}-${mounth}-${sd} ${sh}:${sf}:${ss}`;
          item.dayStrs = dstr;
          item.jsStart = jss;
          return item;
        });
        this.ksList = wrLists;
        sessionStorage.setItem("wrlists", JSON.stringify(this.ksList));
        let arr = res.data.data.filter(item => {
          if (item.major != "市政" && item.major != "建筑") return item;
        });
        this.phList = arr;
        let firstObj = arr[0];
        if (this.$store.state.$user.token) {
          if (this.showGb.showJ && firstObj.major == "经济") {
            this.dryrunList(firstObj);
          } else if (this.showGb.showF && firstObj.major == "法规") {
            this.dryrunList(firstObj);
          } else if (this.showGb.showG && firstObj.major == "管理") {
            this.dryrunList(firstObj);
          } else if (this.showGb.showS && firstObj.major == "市政") {
            this.dryrunList(firstObj);
          } else if (this.showGb.showZ && firstObj.major == "建筑") {
            this.dryrunList(firstObj);
          }
        }
      });
    },

    wantBao() {
      this.$router.push({
        path: "/AllPaper",
        query: {
          wan: "1"
        }
      });
    },
    zbBtn(zt) {
      console.log(zt);
      if (zt == 2) return;
      window.open(
        "https://appsbvaf7wn5964.h5.xiaoeknow.com/v1/course/column/p_60f2ab02e4b0041622bd6715?type=3"
      );
    },
    start_count_down() {
      this.remaining_time -= 1000;
      this.timer = setInterval(() => {
        this.remaining_time -= 1000;
      }, 1000);
    },

    // 转换一下弹框时间
    timeEnter(data) {
      let s = new Date(data.start_time);
      let m = s.getMonth() + 1;
      let r = s.getDate();
      let h = s.getHours();
      let mu = (s.getMinutes() + "").padStart(2, 0);
      this.dayStr = `${m}月${r}日${h}:${mu}`;
      this.modal1 = true;
    },

    dryrunBm(data) {
      let obj = {
        lb_id: data.lb_id,
        kmlb: data.kmlb,
        token: this.$store.state.$user.token,
        sj_id: data.id
      };
      this.$api.paper.dryrunBm(obj).then(res => {
        console.log(res);
        if (res.data.event != "100") return this.$Message.error(res.data.msg);
        this.wrList();
        this.timeEnter(data);
      });
    },
    dryrunList(data) {
      let obj = {
        lb_id: data.lb_id,
        kmlb: data.kmlb,
        token: this.$store.state.$user.token,
        sj_id: data.id
      };
      this.$api.paper.dryrunList(obj).then(res => {
        this.dfData = res.data.data;
        this.phDatas = res.data.list;
        this.navClick(5);
      });
    },
    // 查看结果
    lookEnd(item, index) {
      if (this.showGb.showJ && item.major == "经济") {
        this.dryrunList(item);
        this.tLindex = index;
      } else if (this.showGb.showF && item.major == "法规") {
        this.dryrunList(item);
        this.tLindex = index;
      } else if (this.showGb.showG && item.major == "管理") {
        this.dryrunList(item);
        this.tLindex = index;
      } else {
        this.$Message.info("该科目暂无排名");
      }
    },

    // 正在考试
    examIng(item) {
      sessionStorage.setItem("wrObj", JSON.stringify(item));
      this.$router.replace({
        name: "wanExam",
        params: {
          sj_id: item.id
        }
      });
    },

    baoMn(item, index) {
      if (!this.$store.state.$user.token) return this.$router.push("/login");
      if (item.zt == 0) {
        //报名
        this.dryrunBm(item);
      } else if (item.zt == 4) {
        //查看结果
        this.navClick(5);
        this.lookEnd(item, index);
      } else if (item.zt == 1) {
        //已报名
        this.examTip(item);
      } else if (item.zt == 2 || item.zt == 3) {
        // this.lookEnd(item, index);
        //正在考试
        this.examIng(item);
      } else if (item.zt == "zt2") {
        this.dryrunBm(item);
        this.examIng(item);
      }
    },
    closeModel() {
      this.modal1 = false;
    },
    navClick(index) {
      this.actIndex = index;
      let ta = document.documentElement;
      if (index == 0) {
        ta.scrollTop = 900;
      } else if (index == 1) {
        ta.scrollTop = 1600;
      } else if (index == 2) {
        ta.scrollTop = 2300;
      } else if (index == 3) {
        ta.scrollTop = 3100;
      } else if (index == 4) {
        ta.scrollTop = 3900;
      } else if (index == 5) {
        ta.scrollTop = 4700;
      } else if (index == 6) {
        ta.scrollTop = 5800;
      }
    },
    changeItem(item, index) {
      this.phDatas = [];
      this.tLindex = index;
      if (this.$store.state.$user.token) {
        if (this.showGb.showJ && item.major == "经济") {
          this.dryrunList(item);
        } else if (this.showGb.showF && item.major == "法规") {
          this.dryrunList(item);
        } else if (this.showGb.showG && item.major == "管理") {
          this.dryrunList(item);
        } else if (this.showGb.showS && item.major == "市政") {
          this.dryrunList(item);
        } else if (this.showGb.showZ && item.major == "建筑") {
          this.dryrunList(item);
        } else {
          this.$Message.info("该科目暂未公布结果");
        }
      }
    },

    gtop() {
      this.actIndex = null;
      let ta = document.documentElement;
      ta.scrollTop = 0;
    },

    winScroll(e) {
      let top = e.srcElement.scrollingElement.scrollTop;
      if (top >= 400 && top < 1100) {
        this.actIndex = 0;
      } else if (top >= 1100 && top < 1800) {
        this.actIndex = 1;
      } else if (top >= 1800 && top < 2500) {
        this.actIndex = 2;
      } else if (top >= 2500 && top < 3200) {
        this.actIndex = 3;
      } else if (top >= 3200 && top < 4100) {
        this.actIndex = 4;
      } else if (top >= 4100 && top < 5200) {
        this.actIndex = 5;
      } else if (top >= 5200) {
        this.actIndex = 6;
      } else if (top < 400) {
        this.actIndex = null;
      }
    },
    // 直播解答的各种状态的控制--开始
    // 开始之前0-查看回放 1-立即参加 2-未开始
    // 16号
    beforBegin(data) {
      let a = "2021-08-16 09:00:00";
      let b = "2021-08-16 12:00:00";
      // 上午
      if (moment(data).isBefore(a)) {
        this.dayList[0].list[0].zt = 2;
      } else if (moment(data).isBetween(a, b)) {
        this.dayList[0].list[0].zt = 1;
      } else {
        this.dayList[0].list[0].zt = 0;
      }
      let c = "2021-08-16 14:30:00";
      let d = "2021-08-16 17:30:00";
      // 下午
      if (moment(data).isBefore(c)) {
        this.dayList[0].list[1].zt = 2;
      } else if (moment(data).isBetween(c, d)) {
        this.dayList[0].list[1].zt = 1;
      } else {
        this.dayList[0].list[1].zt = 0;
      }
    },
    // 17号
    beforBegin2(data) {
      let a = "2021-08-17 09:00:00";
      let b = "2021-08-17 12:00:00";
      // 上午
      if (moment(data).isBefore(a)) {
        this.dayList[1].list[0].zt = 2;
      } else if (moment(data).isBetween(a, b)) {
        this.dayList[1].list[0].zt = 1;
      } else {
        this.dayList[1].list[0].zt = 0;
      }
      let c = "2021-08-17 14:30:00";
      let d = "2021-08-17 17:30:00";
      // 下午
      if (moment(data).isBefore(c)) {
        this.dayList[1].list[1].zt = this.dayList[1].list[2].zt = 2;
      } else if (moment(data).isBetween(c, d)) {
        this.dayList[1].list[1].zt = this.dayList[1].list[2].zt = 1;
      } else {
        this.dayList[1].list[1].zt = this.dayList[1].list[2].zt = 0;
      }
    },
    // 直播解答的各种状态的控制--结束

    // 计时器显示与否
    // jsShow(data) {
    //   this.showTime.showJ = moment(data).isAfter(this.gbTime.jTime);
    //   this.showTime.showF = moment(data).isAfter(this.gbTime.fTime);
    //   this.showTime.showG = moment(data).isAfter(this.gbTime.gTime);
    //   this.showTime.showS = moment(data).isAfter(this.gbTime.sTime);
    //   this.showTime.showZ = moment(data).isAfter(this.gbTime.zTime);
    // },
    // 公布成绩判定
    cjShow(data) {
      this.showGb.showJ = moment(data).isAfter(this.gbQuest.jTime); //经济
      this.showGb.showF = moment(data).isAfter(this.gbQuest.fTime); //法规
      this.showGb.showG = moment(data).isAfter(this.gbQuest.gTime); //管理
      this.showGb.showS = moment(data).isAfter(this.gbQuest.sTime); //市政
      this.showGb.showZ = moment(data).isAfter(this.gbQuest.zTime); //建筑
    }

    // //考试是否结束
    // examIsEnd(data) {
    //   this.isEnd.showJ = moment(data).isBetween(
    //     this.examEnd.jTime,
    //     this.gbQuest.jTime
    //   ); //经济
    //   this.isEnd.showF = moment(data).isBetween(
    //     this.examEnd.fTime,
    //     this.gbQuest.fTime
    //   ); //法规
    //   this.isEnd.showG = moment(data).isBetween(
    //     this.examEnd.gTime,
    //     this.gbQuest.fTime
    //   ); //管理
    //   this.isEnd.showS = moment(data).isBetween(
    //     this.examEnd.sTime,
    //     this.gbQuest.fTime
    //   ); //市政
    //   this.isEnd.showZ = moment(data).isBetween(
    //     this.examEnd.zTime,
    //     this.gbQuest.fTime
    //   ); //建筑
    // },
    // 是否开始考试了
    // isStartExam(data) {
    //   this.isStart.showJ = moment(data).isBefore(this.startExam.jTime);
    //   this.isStart.showF = moment(data).isBefore(this.startExam.fTime);
    //   this.isStart.showG = moment(data).isBefore(this.startExam.gTime);
    //   this.isStart.showS = moment(data).isBefore(this.startExam.sTime);
    //   this.isStart.showZ = moment(data).isBefore(this.startExam.zTime);
    // }
  },

  created() {
    this.fwTime();
    window.addEventListener("scroll", this.winScroll);
    this.start_count_down();
    // this.wrList();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },

};
</script>

<style lang="scss" scoped>
.wan-contain {
  margin-top: 0;
  .wan-banner {
    // min-width:1240px;
    // height: 965px;
    // position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .img-logo{
      position: absolute;
      top: 30px;
      left: 230px;
      width: 190px;
      height: 48px;
    }
  }
  .wan-content {
    background: #151270;
    padding: 71px 0;
    .container-wan {
      width: 1240px;
      margin: 0 auto;
      #bklc {
        .bul {
          background: url("./imgs/wrmk_sjz@2x.png") center no-repeat;
          background-size: 100%;
          height: 116px;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding-left: 56px;

          .bli {
            height: 30px;
            background: rgba(216, 216, 216, 0);
            border: 1px solid #ffffff;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 30px;
            text-align: center;
            padding: 0 13px;
            &:nth-child(2n + 1) {
              margin-top: -70px;
            }
            &:nth-child(2n) {
              margin-top: 70px;
            }
            &:nth-child(2),
            &:nth-child(3),
            &:nth-child(4) {
              margin-left: 70px;
            }
            &:nth-child(5) {
              margin-left: 23px;
              margin-right: 13px;
            }
            &:nth-child(6) {
              margin-left: 8px;
            }
            &:nth-child(7) {
              margin-left: 60px;
            }
          }
        }
      }
      #kssj,
      #cjfs,
      #jpzs,
      #mkgz,
      #phbd {
        .ks-content {
          margin-top: 80px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          img {
            width: 53.87%;
          }
          .ks-list {
            width: 100%;
            height: 426px;
            background: #302bc3;
            border-radius: 6px;
            position: relative;
            .ks-con {
              width: 1192px;
              background: #ffffff;
              border-radius: 6px;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 44px 31px 39px;
              .ks-li {
                width: 210px;
                height: 295px;
                background: #ffffff;
                box-shadow: 0px 0px 4px 0px #fc4729;
                border-radius: 10px;
                .ks-km {
                  width: 210px;
                  height: 65px;
                  background: linear-gradient(
                    270deg,
                    #fd7401 0%,
                    #fc9900 48%,
                    #fc7300 100%
                  );
                  font-size: 24px;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #ffffff;
                  line-height: 65px;
                  text-align: center;
                }
                .ks-cont {
                  padding: 0 21px;
                  display: flex;
                  align-items: flex-start;
                  justify-content: center;
                  flex-direction: column;
                  margin-top: 19px;
                  .ks-detail {
                    display: flex;
                    align-items: flex-start;
                    flex-direction: column;
                    width: 100%;
                    .span {
                      height: 22px;
                      font-size: 16px;
                      font-family: PingFangSC-Medium, PingFang SC;
                      font-weight: 500;
                      color: rgba(51, 51, 51, 0.5);
                      line-height: 22px;
                      &:first-child {
                        margin-bottom: 9px;
                      }
                    }
                    .r-t {
                      display: flex;
                      width: 100%;
                      justify-content: space-between;
                      .last {
                        margin-left: 11px;
                        width: 102px;
                        height: 29px;
                        background: url(./imgs/bt_qipao@2x.png) no-repeat center;
                        background-size: 100% 100%;
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #fb3a21;
                        line-height: 29px;
                        text-align: center;
                      }
                    }
                  }
                  .btn-span {
                    width: 168px;
                    height: 40px;
                    border-radius: 22px;
                    text-align: center;
                    line-height: 40px;
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    cursor: pointer;
                  }
                  span.end {
                    background: rgba(51, 51, 51, 0.3);
                    color: #ffffff;
                  }
                  span.al-bao {
                    border: 1px solid #fe6229;
                    color: #fe6229;
                  }
                  span.exam {
                    color: #ffffff;
                    background: #fea129;
                  }
                  span.want-bao {
                    background: #fd6229;
                    color: #ffffff;
                  }
                }
              }
            }
          }
        }
      }
      #cjfs {
        .ks-content {
          .cj {
            width: 100%;
            height: 498px;
            .cj-con {
              width: 1192px;
              height: 450px;
              background: #ffffff;
              border-radius: 6px;
              padding: 0;
              .cj-ll {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: url(./imgs/pic_renwu.png) no-repeat 100% 100%;
                padding: 0 18px;
                box-sizing: border-box;
                .con {
                  display: flex;
                  align-items: flex-start;
                  flex-direction: column;
                  .title {
                    height: 29px;
                    font-size: 24px;
                    font-family: Helvetica;
                    color: #170956;
                    line-height: 29px;
                    margin-bottom: 42px;
                  }
                  .con-text {
                    font-size: 18px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(51, 51, 51, 0.8);
                    line-height: 25px;
                    p {
                      margin-bottom: 25px;
                    }
                  }
                  span {
                    width: 265px;
                    height: 54px;
                    background: linear-gradient(
                      360deg,
                      #fd7401 0%,
                      #fc9900 48%,
                      #fc7300 100%
                    );
                    box-shadow: 0px 4px 11px 0px #ff6900;
                    border-radius: 27px;
                    line-height: 54px;
                    font-size: 24px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #ffffff;
                    line-height: 54px;
                    text-align: center;
                    margin-top: 40px;
                    cursor: pointer;
                  }
                  span.down {
                    background: linear-gradient(
                      180deg,
                      #bb42f6 0%,
                      #5d0fe1 100%
                    );
                    box-shadow: 0px 4px 11px 0px #7217e7;
                  }
                }
              }
            }
          }
        }
      }
      #jpzs {
        .ks-content {
          .jp-con {
            width: 1240px;
            height: 588px;
            background: #302bc3;
            border-radius: 6px;
            position: relative;
            .whtie-jp {
              width: 1192px;
              height: 540px;
              background: #ffffff;
              border-radius: 6px;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              .jp-ul {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                .jp-li {
                  width: 500px;
                  margin-bottom: 25px;
                  &:nth-child(2n + 1) {
                    margin-right: 115px;
                  }
                  img {
                    width: 100%;
                  }
                }
              }
              .jp-div {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                .jp-left {
                  width: 1105px;
                  height: 50px;
                  font-size: 18px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #ff0000;
                  line-height: 25px;
                  margin: 25px 0 19px 0;
                }
                .jp-right-s {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-direction: column;
                  span {
                    height: 25px;
                    font-size: 18px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                    line-height: 25px;
                    margin-top: 9px;
                  }
                }
                .bottom {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin-top: 10px;
                  img {
                    width: 24px;
                    margin-right: 11px;
                  }
                  span {
                    height: 25px;
                    font-size: 18px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #ff0000;
                    line-height: 25px;
                  }
                }
              }
            }
          }
        }
      }
      #mkgz {
        .ks-content {
          .mk-con {
            width: 1240px;
            height: 597px;
            background: #302bc3;
            border-radius: 6px;
            position: relative;
            .mk-white {
              width: 1192px;
              height: 549px;
              background: #ffffff;
              border-radius: 6px;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              display: flex;
              align-items: flex-start;
              justify-content: center;
              flex-direction: column;
              box-sizing: border-box;
              padding-left: 81px;
              .mk-cont {
                display: flex;
                h2 {
                  height: 29px;
                  font-size: 24px;
                  font-family: HuXiaoBo-NanShen, HuXiaoBo;
                  font-weight: normal;
                  color: #0e004a;
                  line-height: 29px;
                  margin-right: 24px;
                }
                p {
                  width: 830px; // height: 240px;
                  font-size: 18px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #333333;
                  line-height: 40px;
                  span {
                    color: #ff0000;
                  }
                }
                &:first-child {
                  margin-bottom: 40px;
                }
              }
            }
          }
        }
      }
      #phbd {
        .ks-content {
          .ph-cont {
            width: 1240px;
            height: 893px;
            background: #302bc3;
            border-radius: 6px;
            position: relative;
            .ph-white {
              width: 1192px;
              height: 845px;
              background: #ffffff;
              border-radius: 6px;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              .top {
                display: flex;
                align-items: center;
                justify-content: space-around;
                margin: 30px 0 20px;
                .t-li {
                  width: 200px;
                  height: 58px;
                  background: linear-gradient(270deg, #597dff 0%, #2d1eb2 100%);
                  border-radius: 10px;
                  border: 1px solid #979797;
                  font-size: 21px;
                  font-family: PingFangSC-Medium, PingFang SC;
                  font-weight: 500;
                  color: #ffffff;
                  line-height: 58px;
                  text-align: center;
                  cursor: pointer;
                }
                li.active {
                  background: linear-gradient(
                    270deg,
                    #fd7401 0%,
                    #fc9900 48%,
                    #fc7300 100%
                  );
                }
              }
              .cj-nav {
                display: flex;
                margin-bottom: 20px;
                .nav-i {
                  width: 397px;
                  height: 80px;
                  background: #f3f4f5;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-direction: column;
                  span:first-child {
                    margin-bottom: 8px;
                    font-size: 21px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                  }
                  span:last-child {
                    font-size: 24px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #ff0000;
                  }
                }
              }
              .bottom {
                .h-li {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  height: 52px;
                  &:nth-child(2n + 1) {
                    background: #f3f4f5;
                  }
                  .span {
                    flex: 1;
                    height: 100%;
                    font-size: 21px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                    text-align: center;
                    line-height: 52px;
                    &:first-child {
                      span:first-child {
                        margin-left: -50px;
                        display: inline-block;
                        width: 40px;
                        height: 40px;
                        img {
                          width: 40px;
                          height: 40px;
                          vertical-align: middle;
                        }
                      }
                    }
                  }
                }
              }
              .nodata {
                width: 1192px;
                height: 572px;
                background: #ffffff;
                position: relative;
                .n-img {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-direction: column;
                  span {
                    height: 28px;
                    font-size: 20px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(51, 51, 51, 0.5);
                    line-height: 28px;
                    margin-top: 20px;
                  }
                }
              }
              .bottoms {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 20px;
                img {
                  width: 24px;
                  margin-right: 11px;
                }
                span {
                  height: 25px;
                  font-size: 18px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #ff0000;
                  line-height: 25px;
                }
              }
            }
          }
        }
      }
      #zbjd {
        .zb-content {
          margin: 90px auto 80px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          img {
            width: 668px;
            margin-bottom: 20px;
          }
          .zb-con {
            width: 1240px;
            height: 392px;
            background: #302bc3;
            border-radius: 6px;
            position: relative;
            .zb-comntent {
              width: 1192px;
              height: 344px;
              background: #ffffff;
              border-radius: 6px;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              display: flex;
              align-items: center;
              justify-content: center;
              .left {
                width: 580px;
                height: 344px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .right {
                display: flex;
                align-items: flex-start;
                justify-content: center;
                flex-direction: column;
                margin-left: 32px;
                .zb-ap {
                  h2 {
                    height: 22px;
                    font-size: 18px;
                    font-family: HuXiaoBo-NanShen, HuXiaoBo;
                    font-weight: normal;
                    color: #170956;
                    line-height: 22px;
                    margin-bottom: 20px;
                  }
                  .zb-ul {
                    .zb-li {
                      display: flex;
                      align-items: center;
                      justify-content: flex-start;
                      span {
                        width: 120px;
                        height: 22px;
                        font-size: 16px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        line-height: 22px;
                        box-sizing: border-box;
                        &:not(:last-child) {
                          margin-right: 20px;
                        }
                        &:last-child {
                          height: 32px;
                          background: #ffffff;
                          border-radius: 16px;
                          line-height: 32px;
                          text-align: center;
                          cursor: pointer;
                        }
                      }
                      span.hf {
                        background: #fe6229;
                        color: #ffffff;
                      }
                      span.cj {
                        background: #fea129;
                        color: #ffffff;
                      }
                      span.wks {
                        border: 1px solid #fe6229;
                        color: #fe6229;
                      }
                      &:not(:last-child) {
                        margin-bottom: 10px;
                      }
                    }
                  }
                  &:last-child {
                    margin-top: 25px;
                  }
                }
              }
            }
          }
        }
      }
      #kctj {
        .tj-content {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          margin-top: 87px;
          img {
            width: 670px;
          }
          .tj-con {
            width: 1240px;
            height: 891px;
            background: #302bc3;
            border-radius: 6px;
            position: relative;
            .tj-bond {
              width: 1192px;
              height: 843px;
              background: #ffffff;
              border-radius: 6px;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              display: flex;
              align-items: center;
              justify-content: center;
              img {
                width: 1152px;
              }
            }
          }
        }
      }
    }
  }
  .wan-mao {
    width: 182px;
    height: 498px;
    background: url(./imgs/top_bg@2x.png) no-repeat center center;
    background-size: 100% 100%;
    position: fixed;
    top: 50%;
    left: 37px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    .w-ul {
      margin: 116px auto 0;
      .w-li {
        width: 150px;
        height: 38px;
        box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.5),
          0px 0px 0px 0px rgba(255, 255, 255, 0.5);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        a {
          width: 100%;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }
      }
      .act {
        background: linear-gradient(
          90deg,
          #feca57 0%,
          #e89e20 53%,
          #fdc556 100%
        );
      }
    }
    .g-top {
      margin-top: 11px;
      img {
        width: 48px;
        height: 48px;
      }
    }
  }
  ::v-deep.mol {
    .submit-modal {
      .main {
        width: 350px;
        height: 369px;
        .my-modal1-content {
          padding: 0;
          height: 100%;
          .bao-m {
            width: 100%;
            height: 100%;
            background: url(./imgs/wrmk_tc_bg@2x.png) no-repeat center center;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            .title {
              height: 29px;
              font-size: 21px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 29px;
              letter-spacing: 1px;
              margin-bottom: 58px;
            }
            .ma {
              width: 134px;
              height: 134px;
              margin-bottom: 8px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .close-span {
              width: 158px;
              height: 34px;
              background: linear-gradient(
                270deg,
                #fd7401 0%,
                #fc9900 48%,
                #fc7300 100%
              );
              border-radius: 4px;
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              line-height: 34px;
              text-align: center;
            }
            p {
              width: 286px;
              height: 48px;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #666666;
              line-height: 24px;
              text-align: center;
              margin-bottom: 14px;
              span {
                color: #ff0000;
              }
            }
          }
        }
      }
    }
  }
  a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    p {
    }
  }
}
</style>
